<template>
  <Card dis-hover :bordered="false">
    <Form inline :label-width="0" @submit.native.prevent>
      <Row>
        <Col span="22">
          <FormItem>
            <DatePicker
              v-width="200"
              v-model="params.date"
              type="daterange"
              placeholder="发布日期"
              @on-change="searchData"
            />
          </FormItem>
          <FormItem>
            <Input
              v-width="140"
              placeholder="标题，关键词"
              v-model="params.keywords"
              @on-clear="searchData"
              @on-enter="searchData"
              clearable
            />
          </FormItem>
          <FormItem>
            <Select
              v-width="110"
              placeholder="请选择项目"
              v-model="params.project_id"
              @on-change="searchData"
              @on-open-change="showAll"
              :filterable="condition.projectList.length >= 10"
              clearable
            >
              <Option
                v-for="item in condition.projectList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择发布人"
              v-model="params.created_member_id"
              @on-change="searchData"
              @on-open-change="showAll"
              :filterable="condition.userList.length >= 10"
              clearable
            >
              <Option
                v-for="item in condition.userList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择医生"
              v-model="params.doctor_id"
              @on-change="searchData"
              @on-open-change="showAll"
              :filterable="condition.doctorList.length >= 10"
              clearable
            >
              <Option
                v-for="item in condition.doctorList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择类型"
              v-model="params.type"
              @on-change="searchData"
              clearable
            >
              <Option
                v-for="item in condition.typeList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="100"
              placeholder="分类"
              v-model="params.c_id"
              @on-change="searchData"
              @on-open-change="showAll"
              :filterable="condition.cList.length >= 10"
              clearable
            >
              <Option
                v-for="item in condition.cList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              placeholder="标签筛选"
              v-model="params.tag_ids"
              @on-change="searchData"
              multiple
              clearable
              @on-open-change="showAll"
              :filterable="condition.tagList.length >= 10"
              :max-tag-count="3"
            >
              <Option
                v-for="item in condition.tagList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="110"
              placeholder="请选择状态"
              v-model="params.publish_status"
              @on-change="searchData"
              clearable
            >
              <Option
                v-for="item in condition.statusList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Col>
        <Col span="2" style="text-align: right">
          <Button
            type="primary"
            @click="handleAdd"
            class="ivu-ml-8"
            v-hasC="{
              name: 'v1-buss-content-create',
              flag: 'v1/buss/content/create',
            }"
            >新增</Button
          >
        </Col>
      </Row>
    </Form>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      :max-height="tableHeigth"
      @on-sort-change="sortChange"
    >
      <template #title="{ row }">
        <span @click="handleView(row)" class="view">{{ row.title }}</span>
      </template>
      <template #tag_arr="{ row }">
        <Tag color="default" v-for="item in row.tag_arr" :key="item">{{
          item
        }}</Tag>
      </template>
      <template #keyword="{ row }">
        <Tag color="default" v-for="item in row.keyword" :key="item">{{
          item
        }}</Tag>
      </template>
      <template #publish_status_str="{ row }">
        <Badge
          status="success"
          :text="row.publish_status_str"
          v-if="row.publish_status_str === '正常'"
        />
        <Badge status="error" :text="row.publish_status_str" v-else />
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-buss-content-update',
            flag: 'v1/buss/content/update',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-buss-content-update',
            flag: 'v1/buss/content/update',
          }"
        />
        <a
          @click="handlePublish(row)"
          v-if="row.publish_status_str == '正常'"
          v-hasC="{
            name: 'v1-buss-content-publish-create',
            flag: 'v1/buss/content-publish/create',
          }"
          >发布</a
        >
        <a
          disabled="true"
          v-else
          v-hasC="{
            name: 'v1-buss-content-publish-create',
            flag: 'v1/buss/content-publish/create',
          }"
          >发布</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-buss-content-publish-create',
            flag: 'v1/buss/content-publish/create',
          }"
        />
        <a
          @click="handleData(row)"
          v-hasC="{
            name: 'v1-buss-content-publish-list',
            flag: 'v1/buss/content/publish-list',
          }"
          >数据</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-buss-content-publish-list',
            flag: 'v1/buss/content/publish-list',
          }"
        />
        <a
          @click="handleDel(row.id)"
          class="del"
          v-hasC="{
            name: 'v1-buss-content-delete',
            flag: 'v1/buss/content/delete',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />

    <add
      :showAdd="addModal"
      :isedit="edit"
      @closeAddModal="closeAddModal"
      :id="contentId"
    />
    <publish
      :showPublish="showPublish"
      @closePublishModal="closePublishModal"
      :contentId="contentId"
    />
    <publishlsit
      :showData="showData"
      @closeDataModal="closeDataModal"
      :contentId="contentId"
    />

    <preview
      :showPre="showPre"
      @closePreModal="closePreModal"
      :contentId="contentId"
      :showDownLoad="true"
    />
  </Card>
</template>
<script>
import dayjs from "dayjs";
import add from "./add";
import publish from "./publish";
import publishlsit from "./publishlsit";
import preview from "@/components/preview";
import { contentList, contentCondition, deleteContent } from "@api/content.js";
export default {
  name: "content",
  components: { add, publish, publishlsit, preview },
  data() {
    return {
      tableHeigth: document.body.clientHeight - 280,
      addModal: false,
      showPublish: false,
      showData: false,
      showPre: false,
      edit: true,
      contentId: "",
      params: {
        date: [],
        keywords: "",
        project_id: "",
        tag_ids: [],
        type: "",
        created_member_id: "",
        doctor_id: "",
        c_id: "",
        publish_status: "",
        order_column: "",
        order_sort: "",
        current: 1,
        size: 10,
      },
      condition: {
        projectList: [],
        tagList: [],
        typeList: [],
        userList: [],
        cList: [],
        statusList: [],
        doctorList: [],
      },
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          slot: "title",
          title: "标题",
          width: 260,
          fixed: "left",
        },
        {
          key: "id",
          title: "ID",
          width: 80,
        },
        {
          key: "project_name",
          title: "项目",
          width: 80,
        },
        {
          key: "type_str",
          title: "类型",
          width: 80,
        },
        {
          slot: "tag_arr",
          title: "标签",
          minWidth: 180,
        },
        {
          key: "c_name",
          title: "分类",
          width: 100,
        },
        {
          key: "doctor_name",
          title: "医生",
          width: 100,
        },
        {
          slot: "keyword",
          title: "关键词",
          minWidth: 150,
        },
        {
          slot: "publish_status_str",
          title: "状态",
          width: 80,
        },
        {
          key: "created_member_name",
          title: "发布人",
          width: 100,
        },
        {
          key: "created_at_str",
          title: "发布日期",
          width: 110,
        },
        {
          key: "change_date",
          title: "更新日期",
          width: 110,
        },
        {
          key: "is_stream_str",
          title: "是否可投流",
          width: 110,
        },
        {
          key: "read_num",
          title: "浏览量",
          width: 100,
          sortable: "custom",
        },
        {
          key: "hd_num",
          title: "互动数",
          width: 100,
          sortable: "custom",
        },
        {
          key: "publish_num",
          title: "发布次数",
          width: 110,
          sortable: "custom",
        },
        {
          slot: "action",
          title: "操作",
          width: 200,
          fixed: "right",
        },
      ],
      list: [],
      loading: false,
    };
  },
  mounted() {
    this._selectInfo();
    this.getData();
  },
  methods: {
    showAll(e) {
      if (e) {
        let downList = document.querySelectorAll(
          ".ivu-select-dropdown-list .ivu-select-item"
        );
        downList.forEach((item) => {
          item.style.display = "block";
        });
      }
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    //获取下拉列表
    _selectInfo() {
      contentCondition().then((res) => {
        this.condition.projectList = res.project;
        this.condition.tagList = res.tag;
        this.condition.typeList = res.type;
        this.condition.cList = res.classify;
        this.condition.userList = res.created_member;
        this.condition.statusList = res.publist_status;
        this.condition.doctorList = res.doctor;
      });
    },
    handleDel(index) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除此条记录，删除后不可恢复",
        onOk: () => {
          deleteContent({ id: index })
            .then(() => {
              this.$Message.success("删除成功");
              this._selectInfo();
              this.getData();
            })
            .catch(() => {});
        },
      });
    },
    handleAdd() {
      this.addModal = true;
      this.edit = true;
    },
    handleEdit(info) {
      this.addModal = true;
      this.edit = false;
      this.contentId = info.id;
    },
    handlePublish(info) {
      this.showPublish = true;
      this.contentId = info.id;
    },
    handleData(info) {
      this.showData = true;
      this.contentId = info.id;
    },
    handleView(info) {
      this.showPre = true;
      this.contentId = info.id;
    },
    closePreModal(state) {
      this.showPre = state;
    },
    closeAddModal(state, type) {
      this.addModal = state;
      if (type == "add") {
        this.params.current = 1;
        this._selectInfo();
        this.getData();
      }
      if (type == "edit") {
        this._selectInfo();
        this.getData();
      }
    },
    closeDataModal(state) {
      this.showData = state;
    },
    closePublishModal(state, type) {
      this.showPublish = state;
      if (type == "add") {
        this._selectInfo();
        this.getData();
      }
    },
    getData() {
      this.loading = true;
      const params = {
        created_stime: this.params.date[0]
          ? dayjs(this.params.date[0]).format("YYYY-MM-DD")
          : "",
        created_etime: this.params.date[1]
          ? dayjs(this.params.date[1]).format("YYYY-MM-DD")
          : "",
        keywords: this.params.keywords,
        project_id: this.params.project_id,
        tag_ids: this.params.tag_ids,
        type: this.params.type,
        doctor_id: this.params.doctor_id,
        created_member_id: this.params.created_member_id,
        c_id: this.params.c_id,
        order_sort: this.params.order_sort,
        order_column: this.params.order_column,
        publish_status: this.params.publish_status,
        pageSize: this.params.size,
        page: this.params.current,
      };
      contentList(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.view {
  color: #2d8cf0;
  cursor: pointer;
  word-break: break-all;
}
/deep/.ivu-table-cell {
  word-break: keep-all;
}
</style>
